<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色关联权限</title>
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}"
          href="../../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" href="../../../static/layuimini/css/public.css"
          media="all">
    <style>
        body {
            background-color: #fff;
            padding: 0;
            margin: 0;
        }

        body .layui-layer-btn {
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        .padding-container {
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="padding-container">
    <form class="layui-form" action="" lay-filter="showForm">
        <div class="layui-form-item">

            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>
            </div>
            <input class="layui-input" id="edtSearch" placeholder="输入关键字"
                   style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#x1006;</i>清除搜索
                </button>
                <button id="btnRemovePermission" class="layui-btn layui-btn-sm layui-btn-danger">
                    <i class="layui-icon">&#xe640;</i>移除权限
                </button>
            </div>
        </div>
    </form>

    <table id="permissionTable"></table>
</div>


<!-- 操作列 -->

<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" src="../../../static/layuimini/lib/layui-v2.5.5/layui.js"
        charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" src="../../../static/layuimini/js/lay-config.js?v=1.0.4"
        charset="utf-8"></script>
<script>
    layui.use(['form', 'layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        var layer = layui.layer;
        var form = layui.form;

        var insTb = treeTable.render({
            elem: '#permissionTable',
            url: '[[@{/}]]manage/permission/list?roleId=[[${param.roleId}]]&roleIn=true',
            // toolbar: 'default',
            // height: 'full-200',
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'authorityId',
                pidName: 'parentId',
                authorityName: 'open'
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: 'checkbox', minWidth: 50},
                    {field: 'authorityName', title: '权限名称', minWidth: 120},
                    {field: 'authority', title: '权限标识', minWidth: 100},
                    {
                        title: '类型', templet: function (d) {
                            if (d.type == 3) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            } else if (d.type == 1) {
                                return '<span class="layui-badge layui-bg-blue">模块</span>';
                            } else if (d.type == 2) {
                                return '<span class="layui-badge-rim">菜单</span>';
                            } else {
                                return '<span class="layui-badge layui-bg-green">其他</span>';
                            }
                        }, align: 'center', minWidth: 50
                    },

                ]
            ],
            style: 'margin-top:0;'
        });

        //移除权限
        $('#btnRemovePermission').click(function () {
            layer.confirm('真的要移除选中的权限么', function (index) {
                var dataList = insTb.checkStatus(false);//不获取半选的行，要的就是这个
                var ids = [];
                $(dataList).each(function () {
                    ids.push(this.authorityId);
                });
                console.log(ids);
                $.ajax({
                    type: 'get',
                    url: '[[@{/}]]manage/permission/remove',
                    data: {roleId: [[${param.roleId}]], permissionIds: ids},
                    dataType: 'json',
                    traditional:true,
                    success: function (result) {
                        console.log(result);
                        if (result.success) {
                            layer.msg("操作成功");
                            //移除选中的行
                            $(ids).each(function (){
                                insTb.del(this.valueOf());
                                //大坑，移除后需要立即更新
                                insTb.refresh();
                            });

                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(textStatus);
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    }
                });

                layer.close(index);
            });
        });


        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            $('#edtSearch').val('');
            insTb.clearFilter();
        });

        form.on('submit(showForm)',function () {
            return false;
        });


    });
</script>
</body>
</html>